<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>调动信息</title>
    <%-- 引入vue的js --%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%-- 引入element的js --%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%-- 引入elementui的样式 --%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <%--<el-form :inline="true" :model="stafftransfeform" class="demo-form-inline">
        <el-form-item label="员工编号">
            <el-input v-model="stafftransfeform.staffId" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名">
            <el-input v-model="stafftransfeform.staffName" placeholder="请输员工姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
    </el-form>--%>
    <el-table
            :data="stafftransfe"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                width="90"
                label="调离编号"
        ></el-table-column>
        <el-table-column
                width="120"
                prop="staff.staffname"
                label="调离人姓名"
        ></el-table-column>
        <el-table-column
                width="90"
                prop="oldDept.deptName"
                label="旧部门">
        </el-table-column>
        <el-table-column
                width="90"
                prop="dept.deptName"
                label="新部门">
        </el-table-column>
        <el-table-column
                prop="applytime"
                width="160"
                label="申请调离时间">
        </el-table-column>

        <el-table-column
                width="160"
                prop="exitime"
                label="申核时间">
        </el-table-column>
        <el-table-column
                width="100"
                prop="auditor.staffname"
                label="审核人员">
        </el-table-column>

        <el-table-column
                width="100"
                prop="state"
                label="状态">
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.state==1"
                        effect="dark">
                    审核通过
                </el-tag>
                <el-tag
                        type="danger"
                        v-else-if="scope.row.state==0"
                        effect="dark">
                    驳回
                </el-tag>
            </template>
        </el-table-column>


        <el-table-column
                label="操作"
                >
            <template slot-scope="scope">
                <el-button @click="deleterole(scope.row)" type="danger" icon="el-icon-delete" size="small"
                           circle></el-button>

                <el-popover
                        v-if="scope.row.state===0"
                        placement="top-start"
                        title="驳回理由"
                        width="200"
                        trigger="hover"
                        :content="scope.row.reject">
                    <el-button type="danger" size="small" slot="reference">查看驳回理由</el-button>
                </el-popover>
            </template>
        </el-table-column>


    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            current: 1,//当前页
            pageSize: 5,//每页显示的条数
            total: 0,//总条数
            stafftransfe: [],
            stafftransfeform: {
                id: '',
                staffid: '',
                staffname: '',
                deptid: '',
                newdeptid: '',
                applytime: '',
                exitime: '',
                exid: '',
                state: '',
            },


        },
        //页面加载时调用
        created() {
            //加载表格数据
            this.loadTable();
        },
        methods: {
            /*search() {
                this.staffid = '';
                this.staffname = '';
                // 将当前页码设置为1
                this.current = 1;
                // 加载表格
                this.loadTable();

            },*/

            //查看调动审核信息
            loadTable() {
                axios.post("/stafftransfer/pasandnopas/" + this.current + "/" + this.pageSize)
                    .then(result => {
                        console.log("=======================================")
                        console.log(result)
                        this.stafftransfe = result.data.data.list
                        this.total = result.data.data.total;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            },


            /**
             * 删除员工调动信息
             * @param row
             */
            deleterole(row) {
                console.log(row)
                axios.get("/stafftransfer/deleteByPrimaryKey/"+row.id).then(res=>{
                    if(res.data.code===200){
                        this.$message.success(res.data.msg);
                        this.loadTable();

                    }
                })
            },


            //每页显示的条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadTable();
            },

            //当前页
            handleCurrentChange(val) {
                this.current = val;
                this.loadTable();
            },


        }
    });
</script>
</html>
